<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
  <link rel="icon" type="image/png" href="/static/image/logo.png">
  <title>
    HomePage
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
  <!-- Nucleo Icons -->
  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <!-- CSS Files -->
  <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
  <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body class="g-sidenav-show  bg-gray-200">
  {% verbatim myblock %}
  <div id="app" v-loading="loading" v-cloak>
    <aside
      class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
      id="sidenav-main">
      <div class="sidenav-header">
        <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
          aria-hidden="true" id="iconSidenav"></i>
        <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
          <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
          <span class="ms-1 font-weight-bold text-white">Black White Site</span>
        </a>
        <a class="navbar-brand m-0" href="/pages/personalPage.html" v-if="nick_name !== '_'">
          <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
          <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
        </a>
      </div>
      <hr class="horizontal light mt-0 mb-2">
      <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
              style="background: black !important;">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">close</i>
              </div>
              <span class="nav-link-text ms-1">关闭侧边栏</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white active bg-gradient-primary" href="#" onclick="toggleSidenav()">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">home</i>
              </div>
              <span class="nav-link-text ms-1">社区·圈子</span>
            </a>
          </li>
          <li class="nav-item mt-3">
            <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space</h6>
          </li>
          <li class="nav-item" v-if="nick_name !== '_'">
            <a class="nav-link text-white " href="/pages/personalPage.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">person</i>
              </div>
              <span class="nav-link-text ms-1">我的主页</span>
            </a>
          </li>
          <li class="nav-item" v-if="nick_name !== '_'">
            <a class="nav-link text-white" href="/pages/editorBywang.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="fa fa-bandcamp" aria-hidden="true"></i>
              </div>
              <span class="nav-link-text ms-1">新建文章</span>
            </a>
          </li>
          <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
            <a class="nav-link text-white " href="/pages/sign-in.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">login</i>
              </div>
              <span class="nav-link-text ms-1">登录</span>
            </a>
          </li>
          <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
            <a class="nav-link text-white " href="/pages/sign-up.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">assignment</i>
              </div>
              <span class="nav-link-text ms-1">注册</span>
            </a>
          </li>
          <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
            <a class="nav-link text-white " href="#" @click="logout">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">assignment</i>
              </div>
              <span class="nav-link-text ms-1">退出登录</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="sidenav-footer position-absolute w-100 bottom-0 ">
        <div class="mx-3">
          <div class="copyright text-center text-sm text-muted text-lg-start">
            ©
            <script>
              document.write(new Date().getFullYear())
            </script>,
            made with <i class="fa fa-heart"></i> by
            <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Candyeel</a>
          </div>
        </div>
      </div>
    </aside>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
      <!-- Navbar -->
      <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
        navbar-scroll="true">
        <div class="container-fluid py-1 px-3">
          <!-- 头部左侧 -->
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
              <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
              <li class="breadcrumb-item text-sm text-dark active" aria-current="page">homePage</li>
            </ol>
            <h6 class="font-weight-bolder mb-0">HOME</h6>
          </nav>
          <!-- 头部右侧 -->
          <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
              <div class="input-group input-group-outline">
                <label class="form-label">Type here search</label>
                <input type="text" class="form-control" @keyup.enter="search_something" v-model="keyword">
              </div>
            </div>
            <ul class="navbar-nav justify-content-end" id="right_ul">
              <li class="nav-item d-flex align-items-center">
                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0" v-if="nick_name === '_'">
                  <i class="fa fa-user me-sm-1"></i>
                  <span class="d-sm-inline d-none">登录/注册</span>
                </a>
              </li>
              <!-- 侧边栏显示与否 -->
              <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                  <div class="sidenav-toggler-inner">
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                  </div>
                </a>
              </li>
              <li class="nav-item px-3 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0">
                  <!-- 展示关键 fixed-plugin-button-nav -->
                  <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                </a>
              </li>
              <li class="nav-item dropdown pe-2 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton" data-bs-toggle="dropdown"
                  aria-expanded="false">
                  <i class="fa fa-bell cursor-pointer"></i>
                </a>
                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                  <li class="mb-2">
                    <a class="dropdown-item border-radius-md" href="javascript:;">
                      <div class="d-flex py-1">
                        <div class="my-auto">
                          <img src="/static/assets/img/team-2.jpg" class="avatar avatar-sm  me-3 ">
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="text-sm font-weight-normal mb-1">
                            <span class="font-weight-bold">New message</span> from Laur
                          </h6>
                          <p class="text-xs text-secondary mb-0">
                            <i class="fa fa-clock me-1"></i>
                            13 minutes ago
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="mb-2">
                    <a class="dropdown-item border-radius-md" href="javascript:;">
                      <div class="d-flex py-1">
                        <div class="my-auto">
                          <img src="/static/assets/img/small-logos/logo-spotify.svg"
                            class="avatar avatar-sm bg-gradient-dark  me-3 ">
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="text-sm font-weight-normal mb-1">
                            <span class="font-weight-bold">New album</span> by Travis Scott
                          </h6>
                          <p class="text-xs text-secondary mb-0">
                            <i class="fa fa-clock me-1"></i>
                            1 day
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->
      <div class="container-fluid py-4">
        <!-- 正文通知区 -->
        <div hidden>
          <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(item,idx) in infoList" :key="item">
                <el-image @click="openNew(item.link)"
                  :src="item.image"
                  fit="cover"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="col-sm-1"></div>
          </div>
        </div>
        <br>
        <!-- 内容显示区 -->
        <div class="row">
          <el-empty description="暂无相关内容 请换个搜索词吧~" v-if="articleList.length <= 0" image="/static/image/no_result.svg"></el-empty>
          <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4" v-for="(item, idx) in articleList" v-cloak style="padding-bottom: 30px; position: relative;">
            <i class="el-icon-tuijian" style="font-size: 50px; position: absolute;left: 90px;top: -10px;z-index: 1;" v-if="item.is_recommend === 1"></i>
            <div class="card" style="height:100%;">
              <div class="card-header p-3 pt-2">
                <div
                  class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                  <el-image style="width: 64px; height: 64px" :src="item.head_avatar" fit="cover"></el-image>
                </div>
                <div class="text-end pt-1">
                  <p class="text-sm mb-0 text-capitalize" style="display: flex; flex-direction: row-reverse;">
                    <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip"
                      data-bs-placement="bottom" :title="item.nick_name">
                      <img :src="item.user_image" :alt="item.nick_name" @click="open_personal(item.nick_name)">
                    </a>
                    <!-- 用户标签 -->
                    <el-button size="mini" round type="warning" @click="open_level" style="padding: 2px; padding-right: 6px; margin-left: 2px; margin-right: 2px;">{{item.user_level}}</el-button>
                    <el-button size="mini" round type="danger" v-for="i in item.user_tags" @click="open_tag(i)" style="padding: 2px; padding-right: 6px;"><i class="el-icon-jiaoseguanli"></i>&nbsp;{{i}}</el-button>
                  </p>

                </div>
              </div>
              <!-- 文章标签 -->
              <div class="p-3" style="padding-top: 0 !important;padding-bottom: 0 !important;">
                <el-button size="mini" round type="success" v-for="i in item.tags" @click="jumpTo(i)" style="padding: 2px; padding-right: 6px;"><i class="el-icon-biaoqian"></i>&nbsp;{{i}}</el-button>
              </div>
              <div class="p-3">
                <a class="mb-0" @click="getArticleDetail(item.aid, item.mode)">{{ item.title }}</a>
              </div>
              <hr class="dark horizontal my-0">
              <div class="card-footer p-3">
                <p class="mb-0">
                  <i class="el-icon-chakan2"></i>
                  <span class="text-success text-sm font-weight-bolder">{{ item.view_no }}</span>
                  &nbsp;
                  <i class="el-icon-dianzan"></i>
                  <span class="text-success text-sm font-weight-bolder">{{ item.agree_no }}</span>
                  &nbsp;
                  <i class="el-icon-chat-line-round" aria-hidden="true"></i>
                  <span class="text-success text-sm font-weight-bolder">{{ item.comment_no }}</span>
                </p>
                <p class="mb-0">
                  <i class="el-icon-alarm-clock"></i>
                  <span class="text-error text-sm font-weight-bolder">最近更新于:</span><span class="text-success text-sm font-weight-bolder">{{ item.change_time }}</span>
                  &nbsp;&nbsp;&nbsp;
                  <span class="text-error text-sm font-weight-bolder">最初发表于:</span><span class="text-success text-sm font-weight-bolder">{{ item.add_time }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 按钮区 -->
        <div style="text-align: center;">
          <el-button @click="loadMore" type="info" v-if="next !== null" id="more">加载更多</el-button>
        </div>
      </div>
    </main>
    <!-- 展示 fixed-plugin -->
    <div class="fixed-plugin">
      <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
        <i class="material-icons py-2">settings</i>
      </a>
      <div class="card shadow-lg">
        <div class="card-header pb-0 pt-3">
          <div class="float-start">
            <h5 class="mt-3 mb-0">嗨喽~</h5>
            <p>配置你想要的主题.</p>
          </div>
          <div class="float-end mt-4">
            <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
              <i class="material-icons">clear</i>
            </button>
          </div>
          <!-- End Toggle Button -->
        </div>
        <hr class="horizontal dark my-1">
        <div class="card-body pt-sm-3 pt-0">
          <!-- Sidebar Backgrounds -->
          <div>
            <h6 class="mb-0">侧边栏聚焦</h6>
          </div>
          <a href="javascript:void(0)" class="switch-trigger background-color">
            <div class="badge-colors my-2 text-start">
              <span class="badge filter bg-gradient-primary active" data-color="primary"
                onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span>
            </div>
          </a>
          <!-- Sidenav Type -->
          <div class="mt-3">
            <h6 class="mb-0">侧边栏样式</h6>
            <p class="text-sm">选择想要的侧边栏样式</p>
          </div>
          <div class="d-flex">
            <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
              onclick="sidebarType(this)">暗黑</button>
            <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
              onclick="sidebarType(this)">透明</button>
            <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
              onclick="sidebarType(this)">白亮</button>
          </div>
          <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
          <!-- Navbar Fixed -->
          <div class="mt-3 d-flex">
            <h6 class="mb-0">导航栏固定</h6>
            <div class="form-check form-switch ps-0 ms-auto my-auto">
              <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
            </div>
          </div>
          <hr class="horizontal dark my-3">
          <div class="mt-2 d-flex">
            <h6 class="mb-0">全局主题[白/黑]</h6>
            <div class="form-check form-switch ps-0 ms-auto my-auto">
              <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
            </div>
          </div>
          <hr class="horizontal dark my-sm-4">
          <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
        </div>
      </div>
    </div>
    <el-backtop></el-backtop>
  </div>
  {% endverbatim myblock %}
  <!--   Core JS Files   -->
  <script src="/static/assets/js/core/popper.min.js"></script>
  <script src="/static/assets/js/core/bootstrap.min.js"></script>
  <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>
  <script src="/static/assets/js/plugins/chartjs.min.js"></script>

  <script src="/static/js/jquery.js"></script>
  <script src="/static/js/vue.min.js"></script>
  <script src="/static/js/vue-router.js"></script>
  <script src="/static/js/ele.index.js"></script>
  <script src="/static/js/ping.js"></script>
  <script src="/static/js/clickEmoji.js"></script>
  <script src="/static/js/cookieUtil.js"></script>
  
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <!-- Github buttons -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      nick_name: localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name"),
      user_avatar: localStorage.getItem("avatar") === null ? '_' : localStorage.getItem("avatar"),
      loading: true,
      articleList: [],
      keyword: "",
      next: null,
      // 信息区的图片
      infoList: [
        // {
        //   image: "/static/image/comment_bg.jpg",
        //   link: "#"
        // },
        // {
        //   image: "/static/image/bg2.jpeg",
        //   link: "#"
        // },
        // {
        //   image: "/static/image/bg3.jpeg",
        //   link: "#"
        // }
      ]
    },
    created() {
      this.loading = true;
      this.getArticles('/apiArticle/articles/');
    },
    mounted() {
      // 动态禁用元素呗
      this.change_sign_status();

    },
    watch: {
    },
    methods: {
      loadMore() {
        const url = this.next;
        this.getArticles(url);
      },
      // 打开头部链接
      openNew(link) {
        window.open(link, "_blank")
      },
      jumpTo(tag) {
        const url = `/apiArticle/articles/?word=${tag}`;
        this.articleList = [];
        this.getArticles(url);
      }, 
      search_something() {
        const url = `/apiArticle/articles/?word=${this.keyword}`;
        this.articleList = [];
        this.getArticles(url);
      },
      getArticleDetail(aid, mode) {
        localStorage.setItem('checkMyself', '0');
        localStorage.setItem('refer', document.location.href);
        // localStorage.setItem("view_aid", aid);
        if (mode === '1') {
          document.location.href = `/pages/showEditorBywang.html/?p=${aid}`;
        } else {
          document.location.href = `/pages/showEditorByEditorMD.html/?p=${aid}`;
        }
      },
      change_sign_status() {
        this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
        let self = this;
        setTimeout(function () {
          self.loading = false;
        }, 300)
      },
      logout() {
        localStorage.removeItem('token');
        localStorage.removeItem('nick_name');
        window.clearCookie("jwtToken");
        this.change_sign_status()
      },
      // 获取文章
      getArticles(url) {
        this.loading = true;
        this.accepting = "1";
        fetch(url, {
          method: 'GET',
          headers: {
            'token': localStorage.getItem('token')
          }
        })
          .then(resp => resp.json())
          .then(json => {
            if (json.code !== 200) {
              this.$message({
                message: json.message,
                type: 'warning'
              })
            } else {
              this.articleList = this.articleList.concat(json.data.results);
              this.next = json.data.next;
            }
            this.accepting = "0";
            this.loading = false;
          })
      },
      open_personal(nick_name) {
        this.$message({
          message: `前往${nick_name}的主页 我还没做...`,
          type: 'info'
        })
      },
      open_tag(val) {
        this.$alert(`<strong>${val}</strong>`, '官方认证', {
          dangerouslyUseHTMLString: true
        });
      },
      open_level() {
        this.$alert('<strong>等级分为 <i>10</i> 个等级</strong> \
                      <i>等级由活跃度自动提升</i> \
                      <br>&nbsp;<i>获取活跃度:</i> \
                      <br>&nbsp;&nbsp;文章通过 活跃度+2 每日上限 10\
                      <br>&nbsp;&nbsp;积极评论 活跃度+0.5 每日上限 5 \
                      <br>&nbsp;&nbsp;水文或水评论可能导致封号！ \
                      <hr> \
                      <i>1-3</i> 级 无任何特权 \
                      <br><i>3-6</i> 级 每日前三篇文章免审核 \
                      <br><i>6-9</i> 级 每日前五篇文章免审核 \
                      <br><i><10</i> 级  每日前十篇文章免审核 \
                      <hr>更多功能敬请期待', '等级特权', {
          dangerouslyUseHTMLString: true
        });
      }
    }
  })
</script>
<script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>

</html>